<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>图片在线压缩</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px;
    }
    .image-container {
      width: 45%;
      text-align: center;
    }
    img {
      max-width: 100%;
      /* height: auto; */
      height: 65vh;
      margin-bottom: 10px;
    }
    .download-btn {
      margin-top: 10px;
      padding: 8px 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      position: fixed;
      top: 0;
      right: 25px;
    }
    .download-btn:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div>
    <input
      type="file"
      id="fileInput"
      accept="image/*"
      onchange="compressImage()"
    />
    <br />
    <div class="container">
      <div class="image-container">
        <h2>原始图片</h2>
        <img id="originalImage" style="display: none" />
        <p id="originalSize"></p> <!-- 显示原始文件大小 -->
      </div>
      <div class="image-container">
        <h2>压缩图片</h2>
        <img id="compressedImage" style="display: none" />
        <p id="compressedSize"></p> <!-- 显示压缩后文件大小 -->
        <button class="download-btn" id="downloadBtn" style="display: none">
          下载压缩后的图片
        </button>
      </div>
    </div>
  </div>
  <script src="./compressor.js"></script>
  <script>
    function compressImage() {
      const fileInput = document.getElementById("fileInput");
      const file = fileInput.files[0];

      // Print original size
      console.log(
        "Original size:",
        (file.size / (1024 * 1024)).toFixed(2),
        "MB"
      );

      // Compress image
      new Compressor(file, {
        quality: 0.2,
        success(result) {
          // Print compressed size
          console.log(
            "Compressed size:",
            (result.size / (1024 * 1024)).toFixed(2),
            "MB"
          );

          // Show original image
          const originalImage = document.getElementById("originalImage");
          originalImage.src = URL.createObjectURL(file);
          originalImage.style.display = "inline";

          // Show compressed image
          const compressedImage = document.getElementById("compressedImage");
          compressedImage.src = URL.createObjectURL(result);
          compressedImage.style.display = "inline";

          // Show download button
          const downloadBtn = document.getElementById("downloadBtn");
          downloadBtn.style.display = "inline";

          // Enable download
          downloadBtn.onclick = function () {
            const a = document.createElement("a");
            a.href = URL.createObjectURL(result);
            a.download = "compressed_image.jpg";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          };

          // Update file size text
          const originalSizeText = document.getElementById("originalSize");
          originalSizeText.innerText =
            "Original size: " +
            (file.size / (1024 * 1024)).toFixed(2) +
            " MB";

          const compressedSizeText =
            document.getElementById("compressedSize");
          compressedSizeText.innerText =
            "Compressed size: " +
            (result.size / (1024 * 1024)).toFixed(2) +
            " MB";

          // result is the compressed Blob object, can be uploaded to server
          console.log("Compression successful:", result);
        },
        error(error) {
          console.error("Compression failed:", error);
        },
      });
    }
  </script>
</body>
</html>
